import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '时间轴',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new),
          color: Colors.black,
          onPressed: () {
            print('返回');
          },
        ),
        elevation: 3,
        shadowColor: const Color.fromRGBO(243, 246, 251, 0.2),
        centerTitle: true,
        backgroundColor: Colors.white,
        title: const Text(
          "时间轴",
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
      body: Container(
          decoration:
          const BoxDecoration(color: Color.fromRGBO(243, 246, 251, 1)),
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
          child: ListView(
            children: [
              Container(
                width: double.infinity,
                color: Colors.white,
                child: ListTile(
                  leading: ClipOval(
                    child: Image.network(
                      "http://fc-home.cn/zb_users/theme/tpure/style/images/boy.jpg",
                      fit: BoxFit.cover,
                      repeat: ImageRepeat.repeatY,
                      width: 42,
                      height: 42,
                    ),
                  ),
                  title: const Text("陈牧驰"),
                  subtitle: const Text("提交日期：2023-03-29"),
                ),
              ),
              Container(
                padding: const EdgeInsets.all(10),
                width: double.infinity,
                child: const Text(
                  "打卡情况",
                  style: TextStyle(fontSize: 14),
                ),
              ),
              Container(
                  width: double.infinity,
                  color: Colors.white,
                  padding: const EdgeInsets.all(10),
                  height: 500,
                  child: ListView.builder(
                    itemCount: 20,
                    itemBuilder: (context, index) {
                      return TimeLineWidget(
                        isLast: index == 19,
                        child: Container(
                          margin: const EdgeInsets.only(bottom: 24),
                          child: index == 5 ? Container(
                            height: 100,
                            decoration: BoxDecoration(
                                color: Colors.cyan,
                                borderRadius: BorderRadius.circular(10)
                            ),
                          ) : Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text("title $index", style: const TextStyle(fontSize: 20),),
                              Text("subtitle $index", style: const TextStyle(fontSize: 16, color: Colors.green),)
                            ],
                          ),
                        ),
                      );
                    },
                  ))
            ],
          )),
    );
  }
}

class TimeLineWidget extends StatelessWidget {
  const TimeLineWidget({super.key, this.isLast = false, required this.child});
  final bool isLast;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            children: [
              Container(
                width: 15,
                height: 15,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Color.fromRGBO(56, 123, 230, 1),
                ),
                child: Center(
                  child: Container(
                    width: 9,
                    height: 9,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color.fromRGBO(255, 255, 255, 1),
                    ),
                  ),
                ),
              ),
              if (isLast)
                const SizedBox.shrink()
              else
                Expanded(
                  child: Container(
                    width: .5,
                    color: const Color.fromRGBO(204, 221, 249, 1),
                  ),
                )
            ],
          ),
          const SizedBox(
            width: 16,
          ),
          Expanded(child: child),
        ],
      ),
    );
  }
}
